
<template>
  <!-- 1 未审核
     2 通过
     3 不通过 -->
  <div>
    <el-card>
      <el-input style="width:200px;">sdfds</el-input><el-button style="margin-left:5px;background:green;color:white;border:2px;">按钮</el-button>
            <!-- 用户列表区域 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="通过" name="first">
        <el-table
          ref="multipleTable"
          style="margin-top: 40px"
          :data="studentlist"
          border
          stripe
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="姓名" prop="student"></el-table-column>
          <el-table-column label="方式" prop="category"></el-table-column>
          <el-table-column
            label="描述信息"
            prop="audit_remark"
          ></el-table-column>
          <el-table-column label="讲师" prop="lecturer"></el-table-column>
          <el-table-column label="导员" prop="counsellor"></el-table-column>
          <el-table-column label="学院" prop="depar"></el-table-column>
          <el-table-column label="班级" prop="cls"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="不通过" name="second">
        <el-table
          ref="multipleTable"
          style="margin-top: 40px"
          :data="studentlist"
          border
          stripe
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="姓名" prop="student"></el-table-column>
          <el-table-column label="方式" prop="category"></el-table-column>
          <el-table-column label="讲师" prop="lecturer"></el-table-column>
          <el-table-column label="导员" prop="counsellor"></el-table-column>
          <el-table-column label="学院" prop="depar"></el-table-column>
          <el-table-column label="班级" prop="cls"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="未审核" name="third">
        <el-table
          ref="multipleTable"
          style="margin-top: 40px"
          :data="studentlist"
          border
          stripe
        >
          <el-table-column type="index"></el-table-column>
          <el-table-column label="姓名" prop="student"></el-table-column>
          <el-table-column label="方式" prop="category"></el-table-column>
          <el-table-column label="讲师" prop="lecturer"></el-table-column>
          <el-table-column label="导员" prop="counsellor"></el-table-column>
          <el-table-column label="学院" prop="depar"></el-table-column>
          <el-table-column label="班级" prop="cls"></el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    </el-card>

  </div>
</template>

<script>
import { getVoice } from "network/api/voice";
export default {
  data() {
    return {
      studentlist: [],
      // 获取用户列表的参数对象
      queryInfo: {
        //  1 未审核
        //  2 通过
        //  3 不通过
        audit_status: 2,
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        pagesize: 5,
      },
      activeName: "first",
      total: 0,
    };
  },
  methods: {
    handleClic() {},
    async getVoices() {
      let res = await getVoice(
        this.queryInfo.audit_status,
        this.queryInfo.page,
        this.queryInfo.pagesize
      );
      this.studentlist = res.data;
      this.total=res.count
      console.log(res);
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getVoices();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getVoices();
    },
    handleClick(e) {
      console.log(e.index);
      if (e.index == 0) {
        // 通过
        this.queryInfo.audit_status = 2;
        this.getVoices();
      } else if (e.index == 1) {
        // 不通过
        this.queryInfo.audit_status = 3;
        this.getVoices();
      } else if (e.index == 2) {
        // 不通过
        this.queryInfo.audit_status = 1;
        this.getVoices();
      }
    },
  },
  created() {
    this.getVoices();
  },
};
</script>
<style lang="less" scoped></style>
